<style>
    * {padding:0px;margin:0px;}
    .box {width:500px;height:180px;overflow: hidden; position: relative;}
    ul {
        list-style:none;
        position: absolute;
        bottom: 10px;
        left: 50%;
        margin-left: -60px;
    }
    ul li {
        float: left;
        width: 10px;
        height:10px;
        background: #fff;
        border-radius: 50%;
        margin-right: 10px;
    }
    ul li.active {background: blue;}
    </style>
    
    
    <div class="box box1">
        <img src="./imgs/img1.jpg" alt="">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    
    
    <div class="box box2">
        <img src="./imgs/img1.jpg" alt="">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <script>
;(function(){
    let num=1
    let t=null
    function startLbt()
    {
        t=setInterval( ()=>{
            num++
            if(num>6)num=1
            document.querySelector('.box img').src=`./imgs/img${num}.jpg`
            document.querySelector('.box1 li.active').className=''
            let ulLiObjs=document.querySelectorAll('.box1 li')
            ulLiObjs[num-1].className='active'
        },1000)
    }
startLbt()
let pageObjs=document.querySelectorAll('.box1 li')
pageObjs.forEach((item,i)=>{
    item.onmouseover=function(){
    clearInterval(t)
    document.querySelector('.box1 img').src=`./imgs/img${i+1}.jpg`
    num=i+1
    document.querySelector('.box1 li.active').className=''
    document.querySelectorAll('.box1 li')[i].className='active'
}
item.onmouseout=function(){
startLbt()

}
})
})()

;(function(){
let num =1
let t=null
function startLbt()
{
t=setInterval(  ()=>{
num++
if(num>6)num=1
document.querySelector('.box2 img').src=`./imgs/img${num}.jpg`
document.querySelector('.box2 li.active').className=''
let ulLiObjs=document.querySelectorAll('.box2 li')
ulLiObjs[num-1].className='active'},1000)
}

startLbt()
let pageObjs=document.querySelectorAll('.box2 li')
pageObjs.forEach( (item,i)=>{
item.onmouseover=function(){
clearInterval(t)
document.querySelector('.box2 img').src=`./imgs/img${i+1}.jpg`
num=i+1
document.querySelector('.box2 li.active').className=''
document.querySelectorAll('.box2 li')[i].className='active'
}

item.onmouseout=function(){
    startLbt()
}
})
})()
    </script>